<script>
import GridItem from 'src/components/grid/GridItem'
import { h, resolveComponent, resolveDirective, withDirectives } from 'vue'

export default {
  name: 'WidgetContainer',
  components: {
    GridItem
  },
  props: {
    data: {
      type: Object,
      default () {
        return {
          x: 0,
          y: 0,
          w: 1,
          h: 1,
          id: String(+new Date())
        }
      }
    },
    // 上下文菜单
    contextMenu: {
      type: [Array, Boolean],
      default: false
    },
    // 取消默认上下文菜单项
    noDefaultContextMenuItem: Boolean,
    // 组件 Loading
    showLoading: Boolean,
    // iFrame 等组件需要拖拽覆层
    dragAnchor: Boolean
  },
  data () {
    const defaultContextMenuItems = [
      {
        label: '删除组件',
        onClick: () => {
          this.deleteWidget()
        }
      }
    ]
    return {
      menuItems: Array.isArray(this.contextMenu)
          ? [
            ...this.contextMenu,
            ...this.noDefaultContextMenuItem
                ? []
                : defaultContextMenuItems
          ]
          : this.contextMenu === true
              ? defaultContextMenuItems
              : []
    }
  },
  inject: {
    grid: { default: null }
  },
  render () {
    const widget = this.data
    return h(resolveComponent('grid-item'), {
      class: ['widget-grid-item', 'widget-container', widget.type],
      id: widget.id,
      x: widget.x,
      y: widget.y,
      w: widget.w,
      h: widget.h,
      static: widget.static,
      isResizable: !widget.noResize,
      minH: widget.minH,
      minW: widget.minW,
      maxH: widget.maxH,
      maxW: widget.maxW
    }, {
      default: () => {
        const closePopup = resolveDirective('close-popup')
        const gridItemContent = h('div', {
          class: ['widget-grid-item-content', 'widget']
        }, this.$slots.default())
        let menuItems = this.menuItems.map(menuItem => {
          return withDirectives(h(resolveComponent('q-item'), {
            clickable: true,
            vClosePopup: true,
            onClick: menuItem.onClick
          }, {
            default: () => h(resolveComponent('q-item-section'), {}, { default: () => menuItem.label })
          }), [
            [closePopup, 1]
          ])
        })
        menuItems = menuItems.map((e, index) => {
          if (index < this.menuItems.length - 1) {
            return [
              e, h(resolveComponent('q-separator'))
            ]
          } else {
            return [e]
          }
        }).flat()
        const rightClickContextMenu = menuItems.length > 0
            ? h(resolveComponent('q-popup-proxy'), {
              contextMenu: true
            }, {
              default: () => {
                return h(resolveComponent('q-list'), {
                  style: [{ minWidth: '100px' }]
                }, {
                  default: () => menuItems
                })
              }
            })
            : null

        const widgetLoading = h(resolveComponent('q-inner-loading'), {
          showing: this.showLoading
        }, {
          default: () => {
            return h(resolveComponent('q-spinner-gears'), {
              size: '50px',
              color: 'primary'
            })
          }
        })

        const dragAnchor = h('div', {
          class: ['drag-anchor']
        }, [
          h(resolveComponent('q-icon'),
              {
                name: 'open_with',
                size: 'lg',
                style: [{
                  color: '#ccc'
                }]
              }
          )
        ])
        return [
          gridItemContent,
          rightClickContextMenu,
          widgetLoading,
          this.dragAnchor ? dragAnchor : null
        ]
      }
    })
  },
  mounted () {
    // ...
  },
  methods: {
    async deleteWidget () {
      await this.$store.dispatch('widget/deleteWidget', this.data)
    }
  }
}
</script>

<style lang="scss">

.widget {

  overflow: hidden;
  user-select: none;

  & > div:first-child {
    position: relative;
    transition: box-shadow .3s;
    background-color: rgb(255 255 255 / 90%) !important;
    border-radius: 2px;
    box-shadow: 0 1px 5px rgb(0 0 0 / 20%), 0 2px 2px rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%);

    &:hover {
      box-shadow: 1px 1px 6px white !important;
    }
  }

  .widget-header {
    &__append-icon {
      visibility: hidden;
      transition: 0.3ms;
      opacity: 0;
      font-size: 24px;
    }
  }

  &:hover {
    .widget-header {
      &__append-icon {
        visibility: visible;
        opacity: 1;
      }
    }
  }
}

.widget-container {
  .drag-anchor {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
    width: 40px;
    height: 50px;
    display: none;
    text-align: center;
  }

  &:hover {
    .drag-anchor {
      display: initial;
    }
  }
}
</style>
